import React, { Component } from 'react'

export default class App extends Component {

    state = {
        count: 100
    }

    render() {
        return (
            <div>
                {/* 事件中，普通函数无法找到 this ,所以一般在事件中建议使用箭头函数 */}
                <h1>App -- {this.state.count} </h1>
                <button onClick={function () {
                    // 事件中使用普通函数，会导致 this 是一个 undefined
                    // 所以千万不要在 react 事件中使用普通函数
                    console.log(this);
                }} >点击增加</button>


                <button onClick={() => {

                    console.log(this);
                    // 不能使用，相当于直接修改了原数据
                    // this.state.count++

                    // 不能使用，因为先赋值后加 1
                    // this.setState({
                    //     count: this.state.count++
                    // })

                    // this.forceUpdate()

                    // 可以使用，但不太建议，因为这样会是先修改了源数据，不规范
                    // this.setState({
                    //     count: ++this.state.count
                    // })

                    this.setState({
                        count: this.state.count + 1
                    })


                }}>点击加 1</button>

            </div>
        )
    }
}
